import React from 'react'
import './App.css';

// function App() {
//   return (
//     <div className="App">
//       123456789
//     </div>
//   );
// }


class Bpp extends React.Component {
  componentWillUnmount(){
    console.log('Bpp组件卸载'); // 组件卸载时执行
  }
  render(){  // 类组件需要render，函数式组件就不需要了
    return (
      <h1>我是Bpp</h1>
    )
  }
}

class App extends React.Component {
    constructor(props){
      super(props) // react里面这个必须得有
      console.log('构造函数执行'); // 执行顺序 1 

      this.state = {
        name:'初始化',
        money: 100,
        bpp_show: true
      }
    }

    static getDerivedStateFromProps(props,state){
      // props：组件即将用来渲染的下一个 props。
      // state：组件即将渲染的下一个 state。
      console.log('props',props);
      console.log('state',state);
      
      console.log('getDerivedStateFromProps 函数执行'); // 执行顺序 2 

      if(state.money === 100){
        return {
          money: '一百元'
        }
      }
      return {
        name:'getDerivedStateFromProps 对状态做了拦截修改'  // 它会把上面state的里面的值覆盖，此时点击按钮无法更改内容，还是它
      }
    }

    getSnapshotBeforeUpdate(prevProps, prevState){
      // 在页面浏览器真正更新之前执行,但是它在render之后
      console.log('getSnapshotBeforeUpdate 函数执行');// 更新时，执行顺序2
      console.log('prevProps',prevProps);
      console.log('prevState',prevState); // 先前的状态值
      
      return {
        snapshot:'我传给你的信息'
      }
    }

    componentDidUpdate(prevProps, prevState, snapshot){
      console.log('snapshot',snapshot); // getSnapshotBeforeUpdate的返回值
      console.log('componentDidUpdate-更新完成之后执行'); // 更新时，执行顺序3
      
    }

    click = ()=>{
      this.setState({
        name:'修改后的name'
      })
    }

    clickTwo = ()=>{
      this.setState({
        bpp_show:false
      })
    }
    // 组件挂载完成之后
    componentDidMount(){ // 执行顺序4
      console.log('componentDidMount组件挂载完成之后');
    }
    render(){
      console.log('render函数执行'); // 执行顺序3，如果是在更新,在更新时，执行顺序1
      const {name,money,bpp_show} = this.state
      return (
        <>
        <h1>hello dongkaiije</h1>
        <p>{name}</p>
        <p>money-{money}</p>
        <button onClick={this.click}>修改页面</button>

        {/* 方式1 */}
        {/* {bpp_show ? <Bpp /> : null}   */}
        {/* 方式2 */}
        {bpp_show && <Bpp />}  
        <button onClick={this.clickTwo}>隐藏Bpp</button>
        </>
      )
    }
}

export default App;
